<template>
    <el-dialog v-model="isOpen" @open="open" :title="props.openType=='add'?'添加属性分组':'修改属性分组'" @close="close"
               style="min-width: 350px;width: 30%">
            <el-form ref="dataForm" :rules="rules" :model="form" label-width="100px" align="center">
                <el-form-item label="组名" prop="attrGroupName">
                    <el-input v-model="form.attrGroupName" />
                </el-form-item>
                <el-form-item  label="排序" prop="sort">
                    <el-input v-model="form.sort" type="number"/>
                </el-form-item>
                <el-form-item label="描述" prop="descript">
                    <el-input v-model="form.descript"/>
                </el-form-item>
                <el-form-item label="组图标" prop="icon">
                    <el-input v-model="form.icon"/>
                </el-form-item>
                <el-form-item  label="所属分类">
                    <el-cascader
                            v-model="form.catalogPath"
                            :options="options"
                            :props="caprops"
                            filterable
                            placeholder="试试搜索"
                            @change="handleChange"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button v-show='props.openType=="add"' type="primary" @click="add">添加</el-button>
                    <el-button v-show="props.openType=='edit'" type="primary" @click="updateThis">更新</el-button>
                    <el-button @click="close" type="primary" >取消</el-button>
                </el-form-item>
            </el-form>
    </el-dialog>
</template>

<script setup>
    import {ref,reactive,onBeforeUpdate,onUpdated} from 'vue'
    import MySelectOption from '@/components/common/MySelectOption.vue'
    import UploadFile from '@/components/common/UploadFile.vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'

    let dataForm = ref(null)
    const emits = defineEmits(['close','reload'])
    const rules = reactive({
        attrGroupName: [{ required: true, message: '请输入分组名', trigger: 'blur' },],
        sort: [{required: true,message: '请输入排序数字', trigger: 'blur'},],
        descript: [{required: true,message: '请输入描述', trigger: 'blur'},],
        icon: [{required: true,message: '请填写图标', trigger: 'blur'},],
    })
    let props = defineProps(['openType','id'])
    let orgName = ref()
    let isOpen = ref(false)
    defineExpose({isOpen})
    let form = reactive({})
    let options = reactive([])
    let caprops = {
        value:"catId",
        label:"name"
    }
    function open() {
        if(isOpen.value == true){
            request.get("/api/category/list/tree").then(resp => {
                options.push(...resp)
                if(props.openType==='edit'){
                    request.get(`/api/pmsAttrGroup/getAttrGroupById/${props.id}`).then(resp => {
                        for(let key in resp){
                            form[key] = resp[key]
                        }
                        orgName.value = form['orgName']
                    })
                }else if(props.openType==="add"){
                    for(let key in form){
                        delete form[key]
                    }
                }
            });
          }
    }

    function close(){
        isOpen.value = false
        dataForm.value.resetFields()//重置表单校验
        for(let key in form){
            delete form[key]
        }
    }

    function add(){
        dataForm.value.validate((valid, fields)=>{
            if(valid) {
            if(!form.catalogId){ElMessage({message: '请选择分类',type: 'error'})}
                request.post("/api/pmsAttrGroup/add", form).then(resp => {
                    close()
                    emits("reload")
                    ElMessage({message: '添加成功！', type: 'success'})
                })
            }else{
                ElMessage({message: '缺少必填项！',type: 'error'})
            }
        })
    }
    function updateThis(){
        dataForm.value.validate((valid, fields)=>{
            if(valid) {
                request.post("/api/pmsAttrGroup/update", form).then(resp => {
                    close()
                    emits("reload")
                    ElMessage({message: '修改成功！',type: 'success'})
                })
            }else{
                ElMessage({message: '缺少必填项！',type: 'error'})
            }
        })
    }
    function handleChange (node){
        form.catalogId = node[node.length-1]
        debugger
    }

</script>

<style scoped>

</style>